<template>
  <div>
    <div class="page-header">
      <div class="box">
        <el-row class="left">
          <el-row class="title">
            <span></span>
            采购单详情
          </el-row>
        </el-row>
        <el-row class="right">
          <el-button type="primary" class="tlwok-btn" @click="reloadPage">
            <span class="el-icon-refresh el-icon--left"></span>刷新
          </el-button>
          <el-button type="danger" class="tlwok-btn" @click="closePage">
            <span class="el-icon-close el-icon--left"></span>关闭
          </el-button>
        </el-row>
      </div>
    </div>
    <div class="page-content">
      <div class="info-box">
        <el-steps
          active="4"
          finish-status="error"
          align-center
          v-if="basicInfo.orderState == 0"
        >
          <el-step
            v-for="step in stepListError"
            :key="step.code"
            icon="el-icon-time"
            :title="step.desc"
            :description="descTime(step.code)"
            :status="step.status"
          ></el-step>
        </el-steps>
        <el-steps
          :active="stepActive"
          finish-status="success"
          align-center
          v-else
        >
          <el-step
            v-for="step in stepList"
            :key="step.code"
            icon="el-icon-time"
            :title="step.desc"
            :description="descTime(step.code)"
          ></el-step>
        </el-steps>
      </div>
      <div class="table-box">
        <div class="table-title">
          <el-row class="left">
            <span class="title">
              采购单编号：{{ basicInfo.purchaseOrderId }}
            </span>
          </el-row>
        </div>
        <div class="info-item base-info">
          <div class="thead">
            <el-row>
              <i class="el-icon-s-management el-icon--left"></i> 采购单基础信息
            </el-row>
          </div>
          <div class="tbody">
            <div class="content">
              <div class="line-item">
                <el-row>
                  <span class="required-icon">*</span>
                  业务员：{{ basicInfo.clientName }}
                </el-row>
                <el-row>
                  <span class="required-icon">*</span>
                  业务类型：{{ basicInfo.businessType }}
                </el-row>
                <el-row>
                  <span class="required-icon">*</span>
                  采购时间：{{ basicInfo.orderTime }}
                </el-row>
              </div>
              <div class="line-item">
                <el-row>
                  <span class="required-icon">*</span>
                  客户名称：{{ basicInfo.clientUnitName }}
                </el-row>
                <el-row>
                  <span class="required-icon">*</span>
                  收货地址：{{ basicInfo.address }}
                </el-row>
                <el-row> 联系电话：{{ basicInfo.clientPhone }} </el-row>
              </div>
              <div class="line-item">
                <el-row> 下单平台：{{ basicInfo.platformType }} </el-row>
                <el-row> 订单编号：{{ basicInfo.orderId }} </el-row>
                <el-row>备注：{{ basicInfo.remark || '无' }}</el-row>
              </div>
            </div>
          </div>
        </div>
        <div class="info-item product-info">
          <div class="thead">
            <el-row>
              <i class="el-icon-s-management el-icon--left"></i> 采购单商品信息
            </el-row>
            <el-row style="font-weight: normal">
              共<span class="warning-text">{{ totalSize }}条</span
              >商品，合计数量<span class="warning-text">{{ totalNumber }}</span
              >，采购总金额<span class="warning-text"
                >{{ totalPurchasePrice }}元</span
              >，销售总金额<span class="warning-text"
                >{{ totalSalesPrice }}元</span
              >
            </el-row>
          </div>
          <el-table
            :data="tableData"
            style="width: 100%"
            default-expand-all
            :span-method="basicSpanMethod"
            :row-style="{ 'background-color': '#f5f5f5' }"
          >
            <el-table-column type="expand">
              <template slot-scope="scope">
                <el-table
                  :data="scope.row.goodList"
                  :show-header="false"
                  :span-method="
                    expandSpanMethod.bind(null, scope.row.goodList.length)
                  "
                >
                  <el-table-column align="center">
                    <template slot-scope="expand">{{
                      expand.row.goodName
                    }}</template>
                  </el-table-column>
                  <el-table-column align="center" width="120">
                    <template slot-scope="expand">{{
                      expand.row.goodModel
                    }}</template>
                  </el-table-column>
                  <el-table-column align="center" width="100">
                    <template slot-scope="expand"
                      >￥{{ expand.row.price }}
                    </template>
                  </el-table-column>
                  <el-table-column align="center" width="100">
                    <template slot-scope="expand">{{
                      expand.row.num
                    }}</template>
                  </el-table-column>
                  <el-table-column align="center" width="100">
                    <template slot-scope="expand"
                      >￥{{ expand.row.totalPrice }}
                    </template>
                  </el-table-column>
                  <el-table-column align="center" width="100">
                    <template>￥{{ scope.row.salePrice }} </template>
                  </el-table-column>
                  <el-table-column align="center" width="120">
                    <template>{{ scope.row.supplierName }}</template>
                  </el-table-column>
                  <el-table-column align="center" width="100">
                    <template>{{ scope.row.purchaseSource }}</template>
                  </el-table-column>
                  <el-table-column align="center" width="130">
                    <template>{{ scope.row.invoiceNum }}</template>
                  </el-table-column>
                </el-table>
              </template>
            </el-table-column>
            <el-table-column label="商品名称">
              <template slot-scope="scope">
                <div class="basicInfoRow">
                  <span>
                    是否开票：{{ scope.row.invoiceState == 1 ? '是' : '否' }}
                  </span>
                  <span>
                    货款是否支付：{{ scope.row.payState == 1 ? '是' : '否' }}
                  </span>
                  <span>
                    是否发货：{{ scope.row.deliveryState == 1 ? '是' : '否' }}
                  </span>
                  <span>物流单号：{{ scope.row.logisticsNo }}</span>
                  <span>
                    是否签收：{{ scope.row.signState == 1 ? '是' : '否' }}
                  </span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="规格型号" header-align="center" width="120">
            </el-table-column>
            <el-table-column label="单价(元)" header-align="center" width="100">
            </el-table-column>
            <el-table-column label="数量" header-align="center" width="100">
            </el-table-column>
            <el-table-column label="采购金额" header-align="center" width="100">
            </el-table-column>
            <el-table-column label="销售金额" header-align="center" width="100">
            </el-table-column>
            <el-table-column
              label="供应商名称"
              header-align="center"
              width="120"
            >
            </el-table-column>
            <el-table-column label="采购渠道" header-align="center" width="100">
            </el-table-column>
            <el-table-column label="发票编号" header-align="center" width="130">
            </el-table-column>
          </el-table>
          <div class="table-handler">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-sizes="pageSizeArr"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalSize"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable eqeqeq */
export default {
  name: 'PODetail',
  data() {
    return {
      purchaseOrderId: null,
      basicInfo: {},
      stepList: [
        { code: 1, desc: '待发货' },
        { code: 2, desc: '待收货' },
        { code: 3, desc: '待确认收货' },
        { code: 4, desc: '已完成' },
      ],
      stepListError: [
        { code: 1, desc: '待发货', status: 'wait' },
        { code: 2, desc: '待收货', status: 'wait' },
        { code: 3, desc: '待确认收货', status: 'wait' },
        { code: 4, desc: '已取消' },
      ],
      totalPurchasePrice: 0,
      totalSalesPrice: 0,
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      pageSizeArr: [10, 20, 30, 40],
      totalSize: 0,
      totalNumber: 0,
    }
  },
  computed: {
    stepActive() {
      let val = 0
      if (this.basicInfo.orderState == 3) {
        val = 3
      } else if (this.basicInfo.orderState == 99) {
        val = 4
      } else val = this.basicInfo.orderState - 1
      return val
    },
  },
  created() {
    this.purchaseOrderId = this.$route.query.id
  },
  methods: {
    reloadPage() {
      location.reload()
    },
    closePage() {
      window.close()
    },
    /**
     * 获取基础信息
     */
    getBasicInfo() {
      this.$axios
        .post(`/api/manage/offline/baseOrderInfo/${this.purchaseOrderId}`)
        .then(res => {
          if (res.success) {
            this.basicInfo = res.result
            this.totalPurchasePrice = this.basicInfo.purchasePrice
            this.totalSalesPrice = this.basicInfo.salePrice
          } else this.$message.error(res.desc)
        })
    },
    /**
     * 获取商品信息
     */
    getGoodsInfo() {
      this.$axios
        .post(`/api/manage/offline/goodInfoList`, {
          parentPurchaseOrderId: this.purchaseOrderId,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        })
        .then(res => {
          if (res.success) {
            this.tableData = res.result.list
            this.totalSize = res.result.total
            this.totalNumber = res.result.skuNum
          } else this.$message.error(res.desc)
        })
    },
    /**
     * 分页-改变展示条数
     */
    changeSize(v) {
      this.pageSize = v
      this.getGoodsInfo()
    },
    /**
     * 分页-翻页
     */
    changePage(v) {
      this.pageNum = v
      this.getGoodsInfo()
    },
    /**
     * 步骤图展示
     */
    descTime(step) {
      let time = ''
      switch (parseInt(step)) {
        case 1:
          time = this.basicInfo.createTime
          break
        case 4:
          time =
            this.basicInfo.orderState == 99 || this.basicInfo.orderState == 0
              ? this.basicInfo.updateTime
              : ''
          break

        default:
          break
      }
      return this.formatDate(time)
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.pageNum = 1
      this.getGoodsInfo()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.getGoodsInfo()
    },
    basicSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 1) return [1, 9]
    },
    expandSpanMethod(length, { row, column, rowIndex, columnIndex }) {
      if (length > 1 && columnIndex > 4) {
        return [length, 1]
      }
    },
  },
  mounted() {
    this.getBasicInfo()
    this.getGoodsInfo()
  },
}
</script>

<style lang="less" scoped>
@themeColor: #298df8;
.page-header {
  background: #eee;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  .box {
    margin: auto;
    width: 1440px;
    height: 65px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 38px;
  }
  .title {
    font-size: 16px;
    font-weight: bold;
    span {
      width: 0;
      height: 20px;
      border: 2px solid @themeColor;
      background: @themeColor;
      margin-right: 14px;
    }
  }
}
.page-content {
  background: #fff;
  padding-top: 65px;
}
.info-box {
  margin: 30px auto;
  width: 60%;
}
.table-box {
  width: 1078px;
  margin: auto;
  padding-bottom: 30px;
}
.table-title {
  border: 1px solid #bbb;
  padding: 0 25px;
  height: 45px;
  display: flex;
  align-items: center;
  background: #e4e4e4;
  justify-content: space-between;
  .left {
    display: flex;
  }
  .title {
    font-weight: bold;
    margin-right: 50px;
  }
}
.info-item {
  border: 1px solid #bbb;
  border-top: 0;
  .thead {
    background: #f5f5f5;
    padding: 0 25px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: bold;
    .info {
      margin-right: 100px;
    }
  }
}
.base-info {
  .tbody {
    border-top: 1px solid #bbb;
    padding: 25px;
  }
  .content {
    width: 85%;
    margin: 0 auto;
  }
  .line-item {
    display: flex;
    align-items: flex-start;
    .el-row {
      flex: 1;
      margin-bottom: 12px;
      line-height: 28px;
      padding-right: 10px;
      &:first-child {
        margin-right: 50px;
      }
    }
  }
}

.table-handler {
  padding: 5px 15px;
  background-color: #fff;
  text-align: right;
}
.basicInfoRow {
  display: flex;
  justify-content: space-between;
  span {
    padding: 0 10px;
  }
}
</style>
<style lang="less" >
.product-info .el-table__expanded-cell[class*='cell'],
.batchShipBasicRow > td {
  padding: 0;
}
.el-table.batchShipTable::before {
  height: 0;
}
</style>